<template>
  <div>
    <ExportImage class="export-container" style="margin-bottom: 18px;"
                 el="#score-echarts-box"
                 :name="title"
    />
    <div id="score-echarts-box" v-loading="loading" element-loading-background="#FFFFFF">
      <div ref="score1" id="score1" class="score"></div>
      <div ref="score2" id="score2" class="score"></div>
    </div>
  </div>
</template>

<script>
import ExportImage from '@/components/common/ExportImage.vue'
import {scdCardSub as grapesScdCardSub} from "@/api/grapesRegionDeterm/grapesRegionDeterm";
import {scdCardSub as globalScdCardSub} from "@/api/globalDeterm/globalDeterm";
import {getOption1, getOption2} from "@/components/ScoreCard/ScoreDetailCharts";

const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');

export default {
  name: "ScoreDetail",
  components: {
    ExportImage,
  },
  props: {
    requestData: {
      type: Object,
      default: () => ({
        mode1: null,
        mode2: null,
        area: null,
        datesList: [],
        metric: null,
        variable: null,
        level: null,
      }),
    },
  },
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    async draw() {
      this.loading = true;
      let res;
      if (this.isGrapes()) {
        res = await grapesScdCardSub(this.requestData);
      } else {
        res = await globalScdCardSub(this.requestData);
      }
      const resData = res.data;

      const op1 = getOption1(this.title, resData.metric);
      const op2 = getOption2(resData.diff);

      const charts1 = echarts.init(this.$refs.score1);
      charts1.setOption(op1);

      const charts2 = echarts.init(this.$refs.score2);
      charts2.setOption(op2);
      this.loading = false;
    },
    isGrapes() {
      return this.$route.path.indexOf('grapes') > -1;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.draw();
    })
  },
  computed: {
    title() {
      const {area, metric, variable, level} = this.requestData;
      return `${area}_${metric}_${variable}_${level}`
    }
  },
  watch: {
    requestData(val) {
      this.draw();
    }
  }
}
</script>

<style lang="scss" scoped>
.export-container {
  margin-bottom: 18px;
  .outputbutton {
    margin-right: 10px;
  }
}
.score {
  width: 100%;
  height: 300px;
}
</style>